<template>
    <el-dialog :model-value="show" title="添加退货原因" @close="emit('hide')" width="421px">
        <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="原因类型:" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="排序:">
        <el-input v-model="form.sort" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否启用：">
        <template #default="{ row }">
        <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
      </template>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitFn">确定</el-button>
      </span>
    </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { ElMessageBox,ElMessage,FormInstance} from "element-plus";
import { returnReasonCreateApi,getReturnReasonById,updateReturnReason} from "./api";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0
  }
});
watch(
    () => props.id,
    () => {
      if (props.id !== 0) {
        getReturnReasonById(props.id).then((res) => {
          if (res.code === 200) {
            Object.assign(form, res.data)
          }
        });
      }else{
        form.name=''
        form.sort=0
        form.status=0
  }
    }

  );
const emit = defineEmits(["hide"]);
const cancel = ()=>{
    emit("hide");
  }
const form = reactive<returnReasonCreateModel>({
  createTime: '',
  id: 0,
  name: '',
  sort: 0,
  status: 0,
});
const rules = {
    name: [{ required: true, trigger: "blur", message: "请填写原因类型" }],
};
const formRef = ref<FormInstance>();
  const addReturnReason = () => {
  ElMessageBox.confirm("确定要添加退货原因吗？", "添加退货原因", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      returnReasonCreateApi(form).then((res) => {
        if (res.code === 200) {
          ElMessage.success("添加成功");
          emit("hide", true);
          formRef.value?.resetFields();
          
        }
      });
    })
    .catch(() => {

    });
};

const editReturnReason = () => {
  ElMessageBox.confirm("确定要添加退货原因吗？", "修改添加退货原因", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      updateReturnReason(form).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          formRef.value?.resetFields();
          emit("hide", true);
        
        }
      });
    })
    .catch(() => {});
};

const submitFn = () => {
  formRef.value?.validate((ok: boolean) => {
    if (ok) {
      if (props.id === 0) {
        addReturnReason();
       
      } else {
        editReturnReason();
       
      }
    } else {
    }
  });
};
</script>

<style lang="less" scoped>


    :deep(.el-input){
      width: 200px;
     
    }

</style>